{% extends "base.html" %}

{% block title %}重点问题分析 - {{ super() }}{% endblock %}

{% block content %}
    <!-- 查询条件区域 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
        <h3 class="text-lg font-semibold text-slate-800 mb-4">查询条件</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
            <!-- 区域选择 -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">区域</label>
                <div class="flex space-x-2">
                    <select class="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option>全部区县</option>
                        <option>福田区</option>
                        <option>罗湖区</option>
                        <option>南山区</option>
                        <option>宝安区</option>
                        <option>龙岗区</option>
                    </select>
                    <select class="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option>全部街道</option>
                        <option>梅林街道</option>
                        <option>华强北街道</option>
                        <option>沙河街道</option>
                    </select>
                </div>
            </div>

            <!-- 问题类型 -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">问题类型</label>
                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option>全部类型</option>
                    <option>环境污染</option>
                    <option>噪音扰民</option>
                    <option>市容管理</option>
                    <option>交通问题</option>
                    <option>设施维护</option>
                </select>
            </div>

            <!-- 时间范围 -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">时间范围</label>
                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option>本月</option>
                    <option>上月</option>
                    <option>本季度</option>
                    <option>全部</option>
                    <option>自定义</option>
                </select>
            </div>

            <!-- 严重程度 -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">严重程度</label>
                <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option>全部级别</option>
                    <option>紧急</option>
                    <option>重要</option>
                    <option>一般</option>
                </select>
            </div>
        </div>

        <!-- 搜索和操作按钮 -->
        <div class="flex items-center justify-between">
            <div class="flex-1 max-w-md">
                <div class="relative">
                    <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
                    <input type="text" placeholder="搜索问题描述、关键词等..." class="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
            </div>
            <div class="flex space-x-3 ml-4">
                <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                    <i class="fas fa-search mr-2"></i>查询
                </button>
                <button class="px-6 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                    <i class="fas fa-redo mr-2"></i>重置
                </button>
            </div>
        </div>
    </div>

    <!-- 重点问题概览 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-slate-800">紧急问题</h3>
                <span class="px-3 py-1 bg-red-100 text-red-700 text-sm rounded-full">需立即处理</span>
            </div>
            <div class="text-3xl font-bold text-red-600 mb-2">12</div>
            <div class="flex items-center justify-between text-sm">
                <span class="text-slate-600">较上月</span>
                <span class="text-red-600">+3 (33%)</span>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-slate-800">重要问题</h3>
                <span class="px-3 py-1 bg-yellow-100 text-yellow-700 text-sm rounded-full">需重点关注</span>
            </div>
            <div class="text-3xl font-bold text-yellow-600 mb-2">28</div>
            <div class="flex items-center justify-between text-sm">
                <span class="text-slate-600">较上月</span>
                <span class="text-green-600">-5 (15%)</span>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-slate-800">重复问题</h3>
                <span class="px-3 py-1 bg-orange-100 text-orange-700 text-sm rounded-full">需根本解决</span>
            </div>
            <div class="text-3xl font-bold text-orange-600 mb-2">45</div>
            <div class="flex items-center justify-between text-sm">
                <span class="text-slate-600">重复率</span>
                <span class="text-orange-600">18%</span>
            </div>
        </div>
    </div>

    <!-- 问题分类分析 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- 问题类型分布 -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200">
            <div class="p-6 border-b border-slate-200">
                <h3 class="text-lg font-semibold text-slate-800">问题类型分布</h3>
            </div>
            <div class="p-6">
                <canvas id="issueTypeChart" width="400" height="300"></canvas>
            </div>
        </div>

        <!-- 区域问题分布 -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200">
            <div class="p-6 border-b border-slate-200">
                <h3 class="text-lg font-semibold text-slate-800">区域问题分布</h3>
            </div>
            <div class="p-6">
                <canvas id="regionIssueChart" width="400" height="300"></canvas>
            </div>
        </div>
    </div>

    <!-- 重点问题列表 -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200">
        <div class="p-6 border-b border-slate-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-slate-800">重点问题列表</h3>
                <div class="flex items-center space-x-3">
                    <select class="px-3 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option>按严重程度排序</option>
                        <option>按发生频次排序</option>
                        <option>按影响范围排序</option>
                    </select>
                    <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                        <i class="fas fa-download mr-2"></i>导出报告
                    </button>
                </div>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="text-left p-4 font-semibold text-slate-700">问题编号</th>
                        <th class="text-left p-4 font-semibold text-slate-700">问题描述</th>
                        <th class="text-left p-4 font-semibold text-slate-700">涉及区域</th>
                        <th class="text-left p-4 font-semibold text-slate-700">发生频次</th>
                        <th class="text-left p-4 font-semibold text-slate-700">严重程度</th>
                        <th class="text-left p-4 font-semibold text-slate-700">处理状态</th>
                        <th class="text-left p-4 font-semibold text-slate-700">操作</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200">
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <span class="font-medium text-indigo-600">ISSUE-001</span>
                        </td>
                        <td class="p-4">
                            <div class="max-w-xs">
                                <p class="text-sm text-slate-800 font-medium">工业废气排放污染</p>
                                <p class="text-xs text-slate-500 mt-1">南山区科技园多家企业废气排放超标</p>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="text-sm text-slate-600">南山区</span>
                            <span class="text-xs text-slate-500 block">科技园片区</span>
                        </td>
                        <td class="p-4">
                            <div class="flex items-center space-x-2">
                                <span class="text-lg font-semibold text-red-600">45</span>
                                <span class="text-xs text-red-600">+12</span>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">紧急</span>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">处理中</span>
                        </td>
                        <td class="p-4">
                            <button class="text-indigo-600 hover:text-indigo-800 text-sm mr-2">
                                <i class="fas fa-eye mr-1"></i>查看
                            </button>
                            <button class="text-green-600 hover:text-green-800 text-sm">
                                <i class="fas fa-chart-line mr-1"></i>分析
                            </button>
                        </td>
                    </tr>
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <span class="font-medium text-indigo-600">ISSUE-002</span>
                        </td>
                        <td class="p-4">
                            <div class="max-w-xs">
                                <p class="text-sm text-slate-800 font-medium">夜间施工噪音扰民</p>
                                <p class="text-xs text-slate-500 mt-1">多个建筑工地夜间施工，严重影响居民休息</p>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="text-sm text-slate-600">福田区</span>
                            <span class="text-xs text-slate-500 block">华强北片区</span>
                        </td>
                        <td class="p-4">
                            <div class="flex items-center space-x-2">
                                <span class="text-lg font-semibold text-orange-600">38</span>
                                <span class="text-xs text-orange-600">+8</span>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">重要</span>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已处理</span>
                        </td>
                        <td class="p-4">
                            <button class="text-indigo-600 hover:text-indigo-800 text-sm mr-2">
                                <i class="fas fa-eye mr-1"></i>查看
                            </button>
                            <button class="text-green-600 hover:text-green-800 text-sm">
                                <i class="fas fa-chart-line mr-1"></i>分析
                            </button>
                        </td>
                    </tr>
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <span class="font-medium text-indigo-600">ISSUE-003</span>
                        </td>
                        <td class="p-4">
                            <div class="max-w-xs">
                                <p class="text-sm text-slate-800 font-medium">河流水质污染</p>
                                <p class="text-xs text-slate-500 mt-1">宝安区某河流出现工业废水偷排现象</p>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="text-sm text-slate-600">宝安区</span>
                            <span class="text-xs text-slate-500 block">新安街道</span>
                        </td>
                        <td class="p-4">
                            <div class="flex items-center space-x-2">
                                <span class="text-lg font-semibold text-red-600">32</span>
                                <span class="text-xs text-red-600">+15</span>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-red-100 text-red-700 text-xs rounded-full">紧急</span>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-full">调查中</span>
                        </td>
                        <td class="p-4">
                            <button class="text-indigo-600 hover:text-indigo-800 text-sm mr-2">
                                <i class="fas fa-eye mr-1"></i>查看
                            </button>
                            <button class="text-green-600 hover:text-green-800 text-sm">
                                <i class="fas fa-chart-line mr-1"></i>分析
                            </button>
                        </td>
                    </tr>
                    <tr class="hover:bg-slate-50">
                        <td class="p-4">
                            <span class="font-medium text-indigo-600">ISSUE-004</span>
                        </td>
                        <td class="p-4">
                            <div class="max-w-xs">
                                <p class="text-sm text-slate-800 font-medium">垃圾乱堆放问题</p>
                                <p class="text-xs text-slate-500 mt-1">罗湖区部分路段垃圾清运不及时</p>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="text-sm text-slate-600">罗湖区</span>
                            <span class="text-xs text-slate-500 block">东门街道</span>
                        </td>
                        <td class="p-4">
                            <div class="flex items-center space-x-2">
                                <span class="text-lg font-semibold text-yellow-600">28</span>
                                <span class="text-xs text-green-600">-3</span>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">重要</span>
                        </td>
                        <td class="p-4">
                            <span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已处理</span>
                        </td>
                        <td class="p-4">
                            <button class="text-indigo-600 hover:text-indigo-800 text-sm mr-2">
                                <i class="fas fa-eye mr-1"></i>查看
                            </button>
                            <button class="text-green-600 hover:text-green-800 text-sm">
                                <i class="fas fa-chart-line mr-1"></i>分析
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block page_scripts %}
<script src="{{ url_for('static', filename='js/key-issues.js') }}"></script>
{% endblock %}